import React, {Component} from 'react'
import {
    View, 
    Text, 
    Image, 
    TouchableOpacity, 
    Modal
} from 'react-native'
import styles from '../../config/styles'
import Icon from 'react-native-vector-icons/Ionicons'

var ImagePicker = require('react-native-image-picker')

const options = {
    title: '选择照片',
    takePhotoButtonTitle: '相机',
    chooseFromLibraryButtonTitle: '从相册选择',
    cancelButtonTitle: '取消',
    mediaType: 'photo',
    quality: 0.5,
    storageOptions: {
      skipBackup: true,
      path: 'images'
    }
}

class ImageSelector extends Component {
    static defaultProps = {
        style: {},
        onFinished: undefined
    }

    showPhoto = () => {
        ImagePicker.showImagePicker(options, (response) => {
            console.log('Response = ', response);
          
            if (response.didCancel) {
                console.log('User cancelled image picker');
            }
            else if (response.error) {
                console.log('ImagePicker Error: ', response.error);
            }
            else if (response.customButton) {
                console.log('User tapped custom button: ', response.customButton);
            }
            else {
                if (this.props.onFinished != undefined) {
                    this.props.onFinished(response.uri)
                }
          
              // You can also display the image using data:
              // let source = { uri: 'data:image/jpeg;base64,' + response.data };
          
            }
          });
    }

    render () {
        return (
            <TouchableOpacity style={{flex: 1}} onPress={() => {this.showPhoto()}}>
                <View style={[{alignItems: 'center', justifyContent: 'center'}, this.props.style]}>
                    <View style={[styles.icon_small_container]}>
                        <View style={{justifyContent: 'center', alignItems: 'center', padding: 12}}>
                            <Icon name={'ios-image-outline'} size={30} color={'white'} />
                        </View>
                    </View>
                    <View style={{paddingTop: 10}}>
                        <Text>图片</Text>
                    </View>
                </View>
            </TouchableOpacity>
        )
    }
}

export default ImageSelector